import React from 'react';
import { connect } from 'dva'
import { routerRedux } from 'dva/router';
import { Tabs, Tag , Grid, TextareaItem, Button, WhiteSpace, WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';
import styles from './zxxx.less'
import banner1 from '../../../assets/infor/banner.jpg';
import  study1 from '../img/study1.png'
import  study2 from '../img/study2.png'
import  study3 from '../img/study3.png'
import  study4 from '../img/study4.png'

const arr = [
  {stem:'中国共产党是中国工人阶级的先锋队,同时是_____的先锋队?',type:'completion'},
  {stem:'中国共产党是中国工人阶级的先锋队,同时是_____的先锋队?',type:'choice',option:['社会主义建设','社会主义','特色社会主义','现代化']},
  {stem:'中国共产党是中国工人阶级的先锋队,同时是_____的先锋队?',type:'choice',option:['正确','错误']},
  {stem:'中国共产党是中国工人阶级的先锋队,同时是_____的先锋队?',type:'completion'},
  {stem:'中国共产党是中国工人阶级的先锋队,同时是_____的先锋队?',type:'choice',option:['社会主义建设','社会主义','特色社会主义','现代化']},
  {stem:'中国共产党是中国工人阶级的先锋队,同时是_____的先锋队?',type:'choice',option:['正确','错误']},
  {stem:'中国共产党是中国工人阶级的先锋队,同时是_____的先锋队?',type:'completion'},
];

class zxxx extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      index:0,
      option:undefined,
      answers:[],
    };
  }
  Previous =(item)=>{
    if(this.state.index > 0) {
      this.setState({
        option:this.state.answers[this.state.index-1],
        index:this.state.index-1,
      })
    }
  };
  next =(item)=>{
    if(this.state.answers.length < arr.length){
      if(!((this.state.index +2) <= this.state.answers.length)){
        if(item.type === 'completion'){
          this.props.form.validateFields((error, value) => {
            console.log('value',value);
            this.state.answers.push(value.answer);
          })
        }else{
          this.state.answers.push(this.state.option);
        }
      }
    }

    if(this.state.index < arr.length-1){
      if((this.state.index +2) <= this.state.answers.length){
        this.setState({
          option:this.state.answers[this.state.index+1],
          index:this.state.index+1,
        })
      }else{
        this.setState({
          index:this.state.index+1,
          option:undefined
        })
      }
    }

  };
  onChoiceClick=(str)=>{
    this.setState({
      option:str
    })
  };
  onClick =(item,index)=>{
    this.props.dispatch(
      routerRedux.push({
        pathname: `/work/zxxx/particular`
      })
    );
  };

  render(){
    const data = [1,2,3,4];
    const { getFieldProps } = this.props.form;
    let item = arr[this.state.index];
    let label ;
    let answer ;
    console.log('23333',this.state.answers);
    console.log('this.state.option',this.state.option);
    switch (item.type)
    {
      case 'completion':
        label = '填空题';
        answer = <TextareaItem
          {...getFieldProps('answer',{
            initialValue: this.state.option
          })}
          rows={5}
          placeholder="在这里输入答案"
        />;
        break;
      case 'choice':
        label = '选择题';
        answer = <div>
          {
            item.option.map((i,index)=>{
              let option = String.fromCharCode(index+65);
              return(
                <div style={{display:'flex',marginBottom:'0.3rem'}} onClick={()=>this.onChoiceClick(option)}>
                  <div className={this.state.option === option?'option_t':'option_f'}>{option}</div>
                  <div className={this.state.option === option?'label_t':'label_f'}>{i}</div>
                </div>
              )
            })
          }
        </div>;
        break;
    }
    return(
      <div>
        <div style={{marginBottom:'0.2rem'}}><img src={banner1} style={{width:'100%'}}/></div>

        <WhiteSpace />
        <div>
        <Tabs defaultActiveKey="1"  animated={false}>
          <Tabs.TabPane tab="在线学习" key="1">
            <div>
              <div style={{marginTop:'0.3rem'}}>
                <span style={{color:'#A3A3A3'}}>分类</span>
                <Tag selected style={{backgroundColor:'red',marginLeft:'0.2rem',fontSize:'0.22rem',color:'white'}}><span style={{width:'1rem'}}>两学一做</span></Tag>
                <Tag style={{marginLeft:'0.2rem',fontSize:'0.22rem'}}><span style={{width:'1rem'}}>法律法规</span></Tag>
                <Tag style={{marginLeft:'0.2rem',fontSize:'0.22rem'}}><span style={{width:'1rem'}}>党建知识</span></Tag>
                <Tag style={{marginLeft:'0.2rem',fontSize:'0.22rem'}}><span style={{width:'1rem'}}>党史精粹</span></Tag>
              </div>
              <div style={{marginTop:'0.3rem'}}>
                <span style={{color:'#A3A3A3'}}>筛选</span>
                <Tag style={{marginLeft:'0.2rem',fontSize:'0.22rem'}}>全部</Tag>
                <Tag selected style={{backgroundColor:'red',marginLeft:'0.2rem',fontSize:'0.22rem',color:'white'}}>必修</Tag>
                <Tag style={{marginLeft:'0.2rem',fontSize:'0.22rem'}}>选修</Tag>

              </div>
            </div>
            <WhiteSpace />
            <Grid
              data={data}
              columnNum={2}
              hasLine={false}
              onClick={this.onClick}
              renderItem={dataItem => {
                let src ;
                switch (dataItem %4)
                {
                  case 0:
                    src = study1;
                    break;
                  case 1:
                    src = study2;
                    break;
                  case 2:
                    src = study3;
                    break;
                  case 3:
                    src = study4;
                    break;
                }
                return(
                  <div style={{textAlign:'center',padding:'0.2rem'}}>
                    <div style={{ width: '100%'}} >
                      <img src={src} style={{ width: '100%'}} />
                    </div>
                    <div style={{ textAlign:'left',marginTop:'0.1rem',fontSize: '0.31rem'}}>10问教你读懂两学一做</div>
                    <div style={{ textAlign:'left',marginTop:'0.1rem',color:'#C0C0C0',fontSize: '0.28rem'}}>2333次学习</div>
                  </div>
                )}}/>

          </Tabs.TabPane>
          <Tabs.TabPane tab="在线考试" key="2">
            <div className="examination"  style={{backgroundColor:"white",padding:'0.4rem 0.25rem 0.3rem'}}>
              <div style={{lineHeight:2,marginBottom:"0.3rem"}}>
          <span style={{display:'inline-block',marginRight:"0.3rem",fontSize:"0.26rem",width:'1.2rem',height:'0.4rem',lineHeight:'0.4rem',textAlign:'center',backgroundColor:'#73B6FB',color:'white',borderRadius:'0.06rem'}}>
            {label}
          </span>
                <span>{`${this.state.index+1}.`}{item.stem}</span>
              </div>
              {answer}
              <div style={{marginTop:"0.5rem"}}>
                <div style={{width:"50%",display:'inline-block'}}>
                  <Button className="btn" style={{marginRight:'0.2rem',float:'right'}} onClick={()=>this.Previous(arr[this.state.index-1])}>上一题</Button>
                </div>
                <div style={{width:"50%",display:'inline-block'}}>
                  <Button className="btn" style={{marginLeft:"0.2rem"}} onClick={()=>this.next(item)}>
                    {
                      (this.state.index +1) === arr.length?'完成':'下一题'
                    }
                  </Button>
                </div>
              </div>
            </div>
          </Tabs.TabPane>
        </Tabs>
        </div>
      </div>
    )
  }
}

function mapStateToProps({mine}) {//models
  return {mine}
}
const zxxxc = createForm()(zxxx);
export default connect(mapStateToProps)(zxxxc);
